<template>
  <div class="comprehensive">
    <ComLeft />
    <ComRight />

    <ComBottom />

    <ModalPolygon v-if="details" @hidden="hidden">
      <Details :data="presentData" />
    </ModalPolygon>
    <ModalPolygon v-if="lifecycle" @hidden="hidden1">
      <LifeCycle :data="presentData" />
    </ModalPolygon>
  </div>
</template>
<script>
import ComLeft from "./left.vue";
import ComRight from "./right.vue";

import ComBottom from "./bottom.vue";
import { STlist } from "@/data.js";
import ModalPolygon from "@/components/ModalPolygon.vue";
import Details from "./Details.vue";
import LifeCycle from "./LifeCycle.vue";

export default {
  name: "Comprehensive",
  components: {
    ComLeft,
    ComRight,
    ComBottom,

    ModalPolygon,
    Details,
    LifeCycle
  },
  data() {
    return {
      details: false,
      presentData: {},
      lifecycle: false
    };
  },
  mounted() {
    if (!this.$root.MapGd) {
      this.$router.push("/");
      return;
    }
    this.$root.MapGd.clearMap();
    this.gdmap();
    window.vm = this;
  },
  methods: {
    opencs(index, id) {
      console.log("dsdid", id);
      for (const elem of STlist.values()) {
        if (elem.wd === id.toString()) {
          this.presentData = elem;
          break;
        }
      }
      if (index === 1) {
        this.details = true;
      } else if (index === 3) {
        // this.regulatory = true
      } else if (index === 2) {
        this.lifecycle = true;
      }
    },
    hidden() {
      this.details = false;
    },
    hidden1() {
      this.lifecycle = false;
    },
    gdmap() {
      let map = this.$root.MapGd;
      let datalist = STlist;
      function createInfoWindow(data) {
        let content = `<div style='width: 23.875rem;background: url(${process.env.BASE_URL}img/04.png) no-repeat;background-size: 100% 100%;padding:2rem'>
              <p class="font_s20 colorF">${data.mc}</p>
              <p style="padding:0.5rem 0;">
                <img class="verticM" style="height:1.125rem;" src="${process.env.BASE_URL}img/05.png" alt="">&nbsp;&nbsp;
                <span class="Bold font_s16" style="color:#28A1FF">${data.dz} </span>
              </p>
              <ul class="flex">
                <li class="textC" style="border: solid 1px #39ADFF;border-radius: 5px;padding: 0.5rem;margin-right: 1rem;">
                  <p class="font_s16" style="color: #28A1FF;">信用等级</p>
                  <p class="font_s20" style="color: #07D35E;">${data.xydj}</p>
                </li>
                <li class="textC" style="border: solid 1px #39ADFF;border-radius: 5px;padding: 0.5rem;margin-right: 1rem;">
                  <p class="font_s16" style="color: #28A1FF;">风险等级</p>
                  <p class="font_s20" style="color: #07D35E;">${data.fxdj}</p>
                </li>
                <li class="textC" style="border: solid 1px #39ADFF;border-radius: 5px;padding: 0.5rem;margin-right: 1rem;">
                  <p class="font_s16" style="color: #28A1FF;">等级评估</p>
                  <p class="font_s20" style="color: #07D35E;">/</p>
                </li>
              </ul>
              <p class="font_s18 flex JustifyContentSA" style="color: #FBBF2F;padding-top:1rem">
              <span onclick="window.vm.opencs(1,${data.wd})">详细信息</span>
              <span onclick="window.vm.opencs(2,${data.wd})">生命周期</span></p>
            </div>`;
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";

        var middle = document.createElement("div");
        middle.className = "info-middle";
        // middle.style.backgroundColor = 'rgba(2,17,64,0.87)'
        middle.innerHTML = content;
        info.appendChild(middle);
        return info;
      }
      // 创建点
      // console.log(datalist)
      for (const elem of datalist.values()) {
        let arr = [];
        arr.push(elem.jg);
        arr.push(elem.wd);
        elem.lnglat = arr;
      }
      let infoWindow = new AMap.InfoWindow({
        isCustom: true,
        offset: new AMap.Pixel(0, -30)
      });
      for (let i = 0, marker; i < datalist.length; i++) {
        marker = new AMap.Marker({
          position: datalist[i].lnglat,
          icon: `${process.env.BASE_URL}img/0${datalist[i].zzlx}.png`,
          map: map
        });
        marker.content = createInfoWindow(datalist[i]);
        marker.on("click", markerClick);
        marker.emit("click", { target: marker });
      }
      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        if (e.pixel) {
          // 初始不打开弹窗
          infoWindow.open(map, e.target.getPosition());
        }
      }
      map.setFitView();
    }
  }
};
</script>
<style lang="scss" scoped>
.comprehensive {
  height: 0;
}
</style>
